<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
    <!-- 需要引入babel包 让babel识别jsx语法 让jsx语法转换为js语法 -->
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // 将script的type属性更改为text/babel 如果只更改type不引入babel包 script将摆烂 都不识别

      /* 
        什么事JSX：
        *react定义的一种类似XML的JS扩展语言JS+XML，并拥有JavaScript 的全部功能
        *JSX本质是React.createElement(component,props,...children)
        的方法的语言塘
        *JSX的语言主要是为了更加方便的书写虚拟DOM，然后浏览器是不识别JSX语法的，所以需要babel对JSX的语法进行编译为js，然后浏览器才会识别
        *JSX语法所在的script标签需要添加一个type属性值为“text/babel”
        *当前文件需要引入babel.js文件，把当前页面中的babel区域进行编译为js，然后浏览器才能执行
    */

      //   const vDOM = <h2>你好 世界</h2>;
      //   ReactDOM.createRoot(document.querySelector("#app")).render(vDOM);

      /*
         JSX语法注意事项：
            *只能有一个跟标签——创建的虚拟DOM对象内的标签
            *不要再jsx语言标签的外部书写引号——会被当成字符串解析
            *想要在jsx中混入js语法，需要使用{}插值表达式 混入js（差值语法中只能书写表达式 不能写语句————有返回值的为表达式 没有返回值的是语句）
            *差值语法展示数据的规则
                -number string 可以直接展示
                -数组 将数组内全部的值直接拼接 数组对象不在其中
                -boolan类型，null，undefined，symbol类型转为空字符串
                -对象基本不支持 会出现报错——Objects are not valid as a React child
            *JSX中书写style亨内样式要使用 style={{}}语法 本质为style{ css语法中的键值对组成的对象 }
            *当遇到属性名是关键字时，需要使用其他替换，比如class书写替换成className书写 for书写替换为htmlFor属性
            *标签需要闭合（单标签 需要斜杠结尾  jsx比较严谨）
            *标签首字母：
                标签首字母小写，则将该标签转为html中同名元素，若html中没有这个元素 则警告（询问你是不是组件名 如果是将该组件名首字母大写）。
                如果首字母大写 则react去渲染对应的组件，如果没有就报错
            *注释书写 在jsx模板中注释也需要写在差值语法中
         */
      let data = 3.21;
      let money = "1000￥";
      const vDOM = (
        <div>
          <span>
            今天是{data},还有{money}
          </span>
          <div
            className="box"
            style={{ width: "300px", height: "300px", background: "red" }}
          >
            这里是div
          </div>
        </div>
      );
      ReactDOM.createRoot(document.querySelector("#app")).render(vDOM);
    </script>
  </body>
</html>
